<template>
  <div id="price">
    <el-button type="warning" @click="back()">返回</el-button>
    <div id="box">
      <h1>智能估价</h1>
      <br />
      <div id="serch">
        <el-input
          v-model="input"
          placeholder="请输入商品名称"
          clearable
          @clear="cle()"
        >
          <template #append>
            <el-button @click="search()">
              <svg
                t="1656298944982"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="2598"
                width="20"
                height="20"
              >
                <path
                  d="M934.966272 879.950848 709.541888 654.526464c47.665152-59.81696 76.166144-135.581696 76.166144-218.012672 0-193.36704-156.752896-350.124032-350.12096-350.124032S85.464064 243.145728 85.464064 436.513792s156.756992 350.124032 350.124032 350.124032c79.875072 0 153.486336-26.766336 212.39808-71.79264l226.04288 226.04288c8.416256 8.416256 19.441664 12.62592 30.470144 12.62592 11.025408 0 22.050816-4.209664 30.466048-12.62592C951.798784 924.055552 951.798784 896.782336 934.966272 879.950848zM165.953536 436.513792c0-148.912128 120.722432-269.630464 269.63456-269.630464S705.21856 287.60064 705.21856 436.513792 584.500224 706.148352 435.588096 706.148352 165.953536 585.42592 165.953536 436.513792z"
                  p-id="2599"
                ></path>
                <path
                  d="M291.135488 302.036992c-8.997888-4.864-20.23424-1.511424-25.097216 7.486464-20.256768 37.476352-32.600064 78.152704-36.688896 120.899584-0.973824 10.181632 6.491136 19.224576 16.672768 20.1984 0.59904 0.057344 1.195008 0.084992 1.784832 0.084992 9.433088 0 17.497088-7.175168 18.413568-16.75776 3.613696-37.7856 14.5152-73.72288 32.401408-106.814464C303.485952 318.138368 300.1344 306.900992 291.135488 302.036992z"
                  p-id="2600"
                ></path>
              </svg>
            </el-button>
          </template>
        </el-input>
      </div>
      <div class="title" v-show="this.price == ''">
        <span>淘物回收</span><br /><br />
        <span>您身边的免费估价助手</span>
      </div>
      <div id="listbox" v-show="this.price != ''">
        <div>
          <span class="text1">已经找到相关商品</span>
          <p></p>
          <!--换为查找的图片-->
          <img :src="this.imgurl" alt="" />
          <p></p>
          <!--换为查找的商品名-->
          <span v-text="this.pname"></span>
        </div>
        <span class="text2">请选择相关信息</span>
        <div class="demo-collapse">
          <el-collapse>
            <el-collapse-item name="1">
              <div class="mb-2 flex items-center text-sm">
                <el-radio-group v-model="radio1" class="ml-4">
                  <el-radio label="1" size="large" border>全新</el-radio>
                  <el-radio label="2" size="large" border>9成新</el-radio>
                  <el-radio label="3" size="large" border>8成新</el-radio>
                  <el-radio label="4" size="large" border>7成新</el-radio>
                </el-radio-group>
              </div>
              <template #title>
                <span id="czlist">商品成色</span>
              </template>
            </el-collapse-item>
            <el-collapse-item name="2">
              <div class="my-2 flex items-center text-sm">
                <el-radio-group v-model="radio2" class="ml-4">
                  <el-radio label="0" size="large" border>功能正常</el-radio>
                  <el-radio label="2" size="large" border>略有问题</el-radio>
                  <el-radio label="3" size="large" border>无法使用</el-radio>
                </el-radio-group>
              </div>
              <template #title>
                <span id="czlist">商品功能情况</span>
              </template>
            </el-collapse-item>
            <el-collapse-item name="3">
              <div class="my-4 flex items-center text-sm">
                <el-radio-group v-model="radio3" class="ml-4">
                  <el-radio label="0" size="large" border>刚买</el-radio>
                  <el-radio label="1" size="large" border>使用一年内</el-radio>
                  <el-radio label="2" size="large" border
                    >使用一年以上</el-radio
                  >
                </el-radio-group>
              </div>
              <template #title>
                <span id="czlist">商品使用时间</span>
              </template>
            </el-collapse-item>
          </el-collapse>
        </div>
      </div>
      <div v-show="radio1 != '' && radio2 != '' && radio3 != ''">
        <el-button type="danger" plain @click="getprice()">进行估价</el-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { getGoodsByInfoAPI } from "@/api";
import axios from "axios";
export default {
  name: "price",
  components: {
    axios,
  },
  data() {
    return {
      radio1: "",
      radio2: "",
      radio3: "",
      input: "",
      mz: [1, 0.9, 0.85, 0.8, 0.7],
      gk: {},
      price: "",
      pname: "",
      imgurl: "",
    };
  },
  methods: {
    //路由跳转
    back() {
      this.$router.push("/recovery");
    },
    //搜索
    async search() {
      if (this.input == "") {
        this.$alert("抱歉，null", "警告", {
          confirmButtonText: "确定",
          callback: (action) => {
            this.$message.error("请重新输入");
          },
        });
      } else {
        const getGoodsByInfoRes = await getGoodsByInfoAPI(this.input);
        if (getGoodsByInfoRes.data.statusCode === 200) {
          this.gk = getGoodsByInfoRes.data.data;
          console.log(this.gk);
          this.$message({
            message: "成功找到商品",
            type: "success",
          });
          // console.log(this.gk[0].p);
          //价格
          this.price = this.gk[0].goodsPrice;
          //把这俩行改回来
          this.imgurl = this.gk[0].goodsImg;
          this.pname = this.gk[0].goodsName;
        } else if (getGoodsByInfoRes.data.statusCode === 400) {
          this.$alert("抱歉，未能搜索到相关商品，请重新输入", "警告", {
            confirmButtonText: "确定",
            callback: (action) => {
              this.$message.error("请重新输入");
            },
          });
          this.input = "";
        }
      }

      // let url = "/prices/mgets?skuids=" + this.input;
      // axios.get("/api" + url).then((res) => {
      //   if ((res.status = 200)) {
      //     this.gk = res.data;
      //     if (this.gk == null) {
      //       //失败
      //       this.$alert("抱歉，未能搜索到相关商品，请重新输入", "警告", {
      //         confirmButtonText: "确定",
      //         callback: (action) => {
      //           this.$message.error("请重新输入");
      //         },
      //       });
      //       this.input = "";
      //     } else {
      //       //成功
      //       this.$message({
      //         message: "成功找到商品",
      //         type: "success",
      //       });
      //       console.log(this.gk[0].p);
      //       //价格
      //       this.price = this.gk[0].p;
      //       //把这俩行改回来
      //       //this.imgurl = this.gk[0].goods_img;
      //       //this.pname = this.gk[0].goods_name;
      //     }
      //   }
      // });
    },
    //估价
    getprice() {
      let num = parseInt(
        this.price *
          this.mz[this.radio1] *
          this.mz[this.radio2] *
          this.mz[this.radio3]
      );
      this.$alert("您的宝贝估价为:" + num + "元", "尊敬的卖家", {
        confirmButtonText: "确定",
      });
    },
    //清理
    cle() {
      this.input = "";
      this.price = "";
      this.radio1 = "";
      this.radio2 = "";
      this.radio3 = "";
    },
  },
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}
body {
  background-color: rgb(240, 243, 239);
}
#price {
  background-color: rgb(240, 243, 239);
}
#serch {
  width: 300px;
  margin: auto;
}
#czlist {
  font-size: 20px;
  color: rgb(32, 32, 32);
}
.title {
  font-size: 40px;
  color: rgb(0, 159, 42);
  margin: 20px;
}
#listbox {
  margin: 10px;
}
.text1 {
  color: rgb(255, 98, 0);
  font-size: 20px;
}
.text2 {
  color: rgb(0, 4, 255);
  font-size: 16px;
}
#box {
  margin: auto;
  width: 1300px;
  height: 820px;
  background-color: white;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  position: absolute;
  text-align: center;
}
</style>